<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="../js/client_core.js"></script>
<link rel="stylesheet" href="../css/start/jquery-ui-1.8.17.custom.css" type="text/css"/>
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
<title>W2A Admin - Manager</title>
</head>
<style type="text/css">
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }		
</style>
<script>
    $(function() {
	$( "#dialog:ui-dialog" ).dialog( "destroy" );
	var name = $( "#name" ), email = $( "#email" ), sellpoint = $( "#sellpoint" ), password = $( "#password" ),
		allFields = $( [] ).add( name ).add( email ).add( sellpoint ).add( password ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
        	tips
		.text( t )
		.addClass( "ui-state-highlight" );
		setTimeout(function() {
                	tips.removeClass( "ui-state-highlight", 1500 );
			}, 
                500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
		o.addClass( "ui-state-error" );
		updateTips( "Length of " + n + " must be between " + min + " and " + max + "." );
		return false;
                }
            else {
            return true;
            }
        }

	function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
		o.addClass( "ui-state-error" );
		updateTips( n );
		return false;
            }
            else {
		return true;
            }
	}
		
	$( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 350,
            width: 450,
            modal: true,
            buttons: {
		"Create an account": function() {
                	var bValid = true;
			allFields.removeClass( "ui-state-error" );
        		bValid = bValid && checkLength( name, "username", 3, 16 );
                        bValid = bValid && checkLength( sellpoint, "sellpoint", 3, 40 );
			bValid = bValid && checkLength( email, "email", 6, 80 );
			bValid = bValid && checkLength( password, "password", 5, 16 );
			bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                        bValid = bValid && checkRegexp( sellpoint, /^[a-z]([0-9a-z_])+$/i, "Sellpoint may consist of a-z, 0-9, underscores, begin with a letter." );
			bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
        		bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
			if ( bValid ) 
                        {
                                            //Codice per invio dati a db
						$( this ).dialog( "close" );
			}
		},
		Cancel: function() {
			$( this ).dialog( "close" );
		}
            },
            close: function() {
		allFields.val( "" ).removeClass( "ui-state-error" );
            }
    });
    $( "#create-user" ).button().click(function() {	$( "#dialog-form" ).dialog( "open" );});
});
</script>
<body>

<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                <label for="sellpoint">Sell Point</label>
		<input type="text" name="sellpoint" id="sellpoint" class="text ui-widget-content ui-corner-all" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>

<div id="users-contain" class="ui-widget">
	<h1>Existing Users:</h1>
	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
                                <th>Sell Point</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr><?php ?>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>

</div>

</body>
</html>
